<template>
  <div class="second-nav jx-content">
    <div class="second-nav-content">
      <ul class="clearfix">
        <li v-for="(item, index) in data" 
        :key="index" 
        index="/index"
        @click="navSelect(index)" 
        :class="item.selected ? 'active' : ''">
        <router-link to="/index">{{ item.value }}</router-link>
        </li>
      </ul>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          value: "详情",
          selected: false
        },
        {
          value: "详情2",
          selected: true
        },
        {
          value: "详情3",
          selected: false
        }
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
    },
    navSelect(index) {
      //this.data.map(a => (a.selected = false));
      this.data.map(function(a){
        a.selected = false;
      });
      this.data[index].selected = true;
      //this.$router.push({ path:'/index'})
    },
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
.second-nav {
  width: 100%;
  padding: 0;
  .second-nav-content {
    width: $width;
    margin: 0 auto;
    li {
      font-size: 14px;
      line-height: 60px;
      cursor: pointer;
      float: left;
      margin-left: 40px;
      position: relative;
      padding: 0 5px;
      &:hover {
        color: $blue;
      }
    }
    li.active {
      &:after {
        content: "";
        display: block;
        width: 100%;
        height: 2px;
        background: $blue;
        position: absolute;
        left: 0px;
        bottom: 0;
      }
    }
  }
}
</style>
